<template>
  <div class="food">
    <el-input
        class="input"
        placeholder="请输入菜品名称"
        v-model="keywords"
        clearable>
    </el-input>
    <el-button @click="searchFood" icon="el-icon-search" type="primary">搜索</el-button>
    <el-button @click="addFood" icon="el-icon-plus" type="primary">添加菜品</el-button>
    <el-button @click="deleteFoodBatch" icon="el-icon-delete" type="danger" :disabled="foodIds.length === 0">批量删除</el-button>
    <el-table v-loading="loading" :data="tableData" class="table" @selection-change="changeSelection">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="title"
              label="菜品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="description"
              label="菜品描述"
              width="300">
      </el-table-column>
      <el-table-column
              prop="img"
              label="菜品图片"
              width="200">
        <template slot-scope="scope">
          <el-image class="food-img" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
        </template>
      </el-table-column>
      <el-table-column
              prop="price"
              label="菜品价格"
              width="200">
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="创建时间"
              width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button @click="editFood(scope.row)" size="small" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-popconfirm class="confirm" title="确定删除？" @confirm="deleteFood(scope.row)">
            <el-button  size="small" slot="reference" type="danger" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="changePage"
        class="page"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
    <el-dialog :title="foodFormTitle" :visible="showFoodForm"  @close="closeFoodForm">
      <el-form :model="foodForm" label-width="100px" ref="foodForm" :rules="foodRules" >
        <el-form-item prop="img" label="菜品图片" style="display: flex; align-items: center">
          <el-upload
            action=""
            class="food-uploader"
            accept=".png,.jpg"
            :http-request="uploadFood"
            :show-file-list="false">
            <el-image v-if="foodForm.img.length > 0" :src="foodForm.img"></el-image>
            <i v-else class="el-icon-plus food-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="title" label="菜品名称" >
          <el-input v-model="foodForm.title"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="菜品描述">
          <el-input v-model="foodForm.description"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="菜品价格">
          <el-input v-model="foodForm.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeFoodForm">取消</el-button>
        <el-button type="primary" @click="submitFoodForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Food",
  data () {
    return {
      loading: false,
      tableData: [],
      keywords: '',
      pageNum: 1,
      pageSize: 5,
      total: 0,
      foodIds: [],
      showFoodForm: false,
      foodFormTitle : '',
      foodForm: {
        title: '',
        description: '',
        img: '',
        price: 0
      },
      foodRules: {
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        description: [{ required: true, message: '必填', trigger: 'blur' }],
        img: [{ required: true, message: '必填', trigger: 'blur' }],
        price: [{ required: true, message: '必填', trigger: 'blur' }],
      },
    }
  },
  methods:{
    uploadFood (param) {
      let formData = new FormData()
      formData.append('file', param.file)
      formData.append('code', 2)
      this.$axios({
        url: '/auth/upload',
        method: 'post',
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(res => {
        if (res.code === 200) {
          this.foodForm.img = window.uploadUrl + res.data
        }
      })

    },
    closeFoodForm () {
      this.showFoodForm = false
      this.foodForm = {
        title: '',
        description: '',
        img: '',
        price: 0
      }
    },
    submitFoodForm: function () {
      const foodBo = this.foodForm
      if (this.foodForm.id) {
        this.$refs.foodForm.validate(valid => {
          if (valid) {
            this.$axios.put(`/food/${this.foodForm.id}`, foodBo).then(res => {
              if (res.code === 200) {
                this.closeFoodForm()
                this.pageNum = 1
                this.loadTableData()
              }
            })
          }
        })
      } else {
        this.$refs.foodForm.validate(valid => {
          if (valid) {
            this.$axios.post('/food', foodBo).then(res => {
              if (res.code === 200) {
                this.closeFoodForm()
                this.pageNum = 1
                this.loadTableData()
              }
            })
          }
        })
      }
    },
    loadTableData () {
      this.loading = true
      this.$axios.get(`/food?keywords=${this.keywords}&&pageNum=${this.pageNum}&&pageSize=${this.pageSize}`).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    addFood () {
      this.foodFormTitle = '添加菜品'
      this.showFoodForm = true
    },
    editFood (row) {
      this.foodForm = {
        id: row.id,
        title: row.title,
        description: row.description,
        img: row.img,
        price: row.price
      }
      this.foodFormTitle = '编辑菜品'
      this.showFoodForm = true
    },
    deleteFood(row) {
      this.$axios.delete(`/food/${row.id}`).then(res => {
        if (res.code === 200) {
          this.pageNum = 1
          this.loadTableData()
        }
      })
    },
    deleteFoodBatch () {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/food/batch', {
          data: this.foodIds
        }).then(res => {
          if (res.code === 200) {
            this.pageNum = 1
            this.loadTableData()
          }
        })
      })
    },
    searchFood() {
      this.pageNum = 1
      this.loadTableData()
    },
    changePage (pageNum) {
      this.pageNum = pageNum
      this.loadTableData()
    },
    changeSelection (rows) {
      for (const row of rows) {
        this.foodIds.push(row.id)
      }
    }
  },
  mounted() {
    this.loadTableData()
  }
}
</script>

<style lang="scss" scoped>
  .food {
    width: 100%;
    height: 100%;
    .input {
      width: 300px;
      margin: 0 20px 0 0;
    }
    .table {
      width: 100%;
      margin-top: 20px;
      .food-img {
        border-radius: 6px;
        overflow: hidden;
        width: 100px;
        height: 100px;
      }
    }
    .confirm {
      margin-left: 20px;
    }
    .page {
      margin: 20px 0;
    }
    .food-uploader{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 100px;
      height: 100px;
      &:hover {
        border-color: #409EFF;
      }
    }
    .food-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
</style>
